<template>
  <div class="submenu">
    <ul>
      <li v-for="item in menuList" :key="item.id">
        <router-link :to="item.link">
          {{item.name}}
        </router-link>
      </li>
    </ul>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  name: 'submenu',
  setup () {
    let menuList = ref([
      {
        name: '按钮',
        link: '/button'
      },
      {
        name: '输入框',
        link: '/input'
      }
    ])
    return {
      menuList
    }
  }
}
</script>

<style lang="less" scoped>
.submenu {
  width: 200px;
  height: 100%;
  text-align: left;
  background: lemonchiffon;
  ul{
    padding: 40px 0 0 40px;
    li {
      margin-bottom: 10px;
    }
  }
}
</style>